<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>联系人分类汇总报表</title>
  <style>
    #pieChartDiv {
        width: 800px;
        height: 500px;
        margin: 50px auto;
    }
  </style>
</head>
<body>
<h2 style="text-align: center;">联系人分类汇总饼状图</h2>

<div id="pieChartDiv"></div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
  /*<![CDATA[*/
  // 获取后端传递的数据
  const categories = [];
  const dataCountByCategory = [[${dataCountByCategory}]];

  // 将 List<Map<String, Integer>> 转换成 ECharts 饼图需要的格式
  const pieData = [];

  for (let i = 0; i < dataCountByCategory.length; i++) {
      const item = dataCountByCategory[i];
      console.log(item);
      const key = Object.keys(item)[0];
      const name = item[Object.keys(item)[1]]
      categories.push(name);
      const value = item[key];
      pieData.push({
          name: name,
          value: value
      });
  }

  console.log(categories);
  console.log(pieData);

  // 初始化 ECharts 实例
  const pieChart = echarts.init(document.getElementById('pieChartDiv'));

  // 配置项
  const pieOption = {
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
          orient: 'vertical',
          left: 'left',
          data: categories
      },
      series: [
          {
              name: '联系人分类',
              type: 'pie',
              radius: '70%',
              center: ['60%', '50%'],
              data: pieData,
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
  };

  // 使用配置项
  pieChart.setOption(pieOption);
  /*]]>*/
</script>
</body>
</html>
